<template>
  <div>
    <!-- table数据展示 start -->
    <el-row>
      <el-col :span="24">
        <el-table
          ref="location-table"
          empty-text
          fit
          size="mini"
          :span-method="objectSpanMethod"
          :data="tableData">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" :label="$t('m.location.locationcode')" width="150">
            <template slot-scope="scope">
              <el-input readonly size="mini" @focus="showLocation($event,scope.row)" v-model="scope.row.locationcode"
              :disabled="scope.row.locationDisabledChange" :placeholder="$t('m.choose')+$t('m.location.locationcode')"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU" width="150"></el-table-column>
          <template v-if="getInventoryDetail().stockway===2">
            <el-table-column align="center" prop="productstocksum" :label="$t('m.inventory.productstocksum')"></el-table-column>
          </template>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" width="200"></el-table-column>
          <el-table-column v-if="getInventoryDetail().state!==1" align="center" :label="$t('m.operation')" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color:#f56c6c"
                @click="handleDelete(scope)">{{$t('m.delete')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->
    <el-row>
      <el-col :span="24" align="left">
        <el-button v-if="getInventoryDetail().state!==1" type="primary" @click="addLocation">{{$t('m.add')}}</el-button>
      </el-col>
    </el-row>
    <!-- 选择库位dialog start -->
    <locationListPopup v-if="locationListPopupVisible" :popupVisible="locationListPopupVisible" :config="locationConfig" @submit="getProductDetail" @close="locationListPopupVisible=false"></locationListPopup>
    <!-- 选择库位dialog end -->

    <!-- 提交库位列表提示dialog start -->
    <locationTipsPopup
      v-show="locationTipsPopupVisible"
      :popupVisible="locationTipsPopupVisible"
      :detail="msgList"
      @close="locationTipsPopupVisible = false"
    ></locationTipsPopup>
    <!-- 提交库位列表提示dialog end -->
  </div>
</template>
<script>
export default {
  name:'inventory-location-table',
  data(){
    return {
      tableData:[],
      tableItem:{
        locationcode:'', // 库位编码
        locationid:0, // 库位id
        partitionid:0, // 库区id
        productid:0, // 产品id
        productname:'', // 产品名称
        productspec:'', // 产品规格
        productspeccode:'', // sku
        storage:0, // 库存量
        suppliercode:'', // 供应商
        state:0,
        locationDisabledChange:false // 禁止修改locationcode
      },
      getMergeRows:[],
      warehouseid:'',
      locationListPopupVisible:false, // 选择库位dialog
      locationTipsPopupVisible:false, // 提交库位列表 提示dialog
      msgList:[]
    }
  },
  inject:{
    getInventoryDetail:{
      default:()=>{}
    }
  },
  components:{
    locationListPopup:() => import('./location-list'),
    locationTipsPopup:() => import('./location-tips-popup')
  },
  mounted(){
    if(!this.getInventoryDetail()){
      this.tableData.push(this.cloneObject(this.tableItem))
    } else {
      let tableData = this.cloneObject(this.getInventoryDetail().initialStockTakeDetailOutputList)
      this.tableData = tableData.map((item)=>{
        this.$set(item,'locationDisabledChange',true)
        return item
      })
    }
  },
  watch:{
    tableData:{
      handler(){
        let __index = 0
        let code = ''
        this.getMergeRows = []
        this.tableData.forEach((item,index)=>{
          if(!item.locationcode){
            this.getMergeRows.push(1)
          } else if(item.locationcode !== code){
            this.getMergeRows.push(1)
            code = item.locationcode
            __index = index
          } else {
            if(code){
              ++this.getMergeRows[__index]
              this.getMergeRows.push(0)
            }
          }
        })
      }
    }
  },
  methods:{
    // 选择库位dialog
    showLocation(event, row){
      this.locationConfig = {
        url:'/locationinfo/listwithnost'
      }
      this.locationListPopupVisible = true
      this.target = event.target
      this.row = row
      this.code = 'source'
    },
    // 根据库位编码获取其对应的信息
    getProductDetail(locationList){
      this.$emit('isProhibited',false) // 重新启用父组件保存按钮
      let data = locationList
      let options = {
        method:'post',
        url:`/locationstock/getlsinfosbylcs4ist`,
        data
      }
      this.$axios(options).then(({ data }) => {
        this.locationListPopupVisible = false
        let list = data.locationstocks || []
        // 过滤重复库位
        list = list.filter((x) => !this.tableData.some((item) => x.locationcode === item.locationcode))
        let content = data.msg.split(';')
        if (!content[content.length - 1]) content.pop()
        this.msgList = content
        if(this.msgList.length) this.locationTipsPopupVisible = true

        if(!this.warehouseid) this.warehouseid = list[0].warehouseid
        // 数据处理
        let arr = []
        for(let i=0;i<list.length;i++){
          let item = Object.assign(this.cloneObject(this.tableItem),list[i])
          item.storage = item.productstocksum
          item.locationDisabledChange = true
          delete item.productstocksum
          delete item.warehouseid
          delete item.warehousename
          arr.push(item)
        }
        this.tableData.splice(this.tableData.length-1,1,...arr)
        this.$emit('isProhibited',false)
      }).catch(()=>{
        // this.$set(this.tableData[scope.$index],'locationcode','') // code:9999 删除输入的库位
      })
    },
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [1]
      if (MergeArr.includes(columnIndex)){
        if(!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    },
    // 新增库位
    addLocation(){
      this.tableData.push(this.cloneObject(this.tableItem))
    },
    // 删除
    handleDelete(scope){
      if(!scope.row.productspeccode){
        this.tableData.splice(scope.$index,1)
      } else{
        this.$confirm(this.$t('m.deleteAlert'), this.$t('m.noticemessage'), {
          confirmButtonText:this.$t('m.confirm'),
          cancelButtonText:this.$t('m.cancel'),
          type:'warning'
        }).then(() => {
          this.tableData.splice(scope.$index,this.getMergeRows[scope.$index])
        }).catch(() => {
          this.callbackMessage(this.$t('m.printservice.cancel'),'info')
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table{margin-bottom: 20px;}
</style>